<div ng-controller="LEDController">
    <div class="panel-group" id="accordion">
        <div class="panel panel-default">
            <div class="panel-heading pointer" data-toggle="collapse" data-target="#LEDController" data-parent="#accordion">
                <h3 class="panel-title">LED Controller</div>
                    <div id="LEDController" class="panel-collapse collapse">
                        <div class="panel-body">
                            <h3 style="text-align: center;">LED Controller</h3>
                            <h6 style="text-align: center;">Version 1.3</h6>
                            <p style="text-align: center;">Written by Foxtrot</p>

                            <p style="text-align: center;">This module allows you to control the LEDs behaviour on both the NANO and the TETRA.</p>
                            <br/>

                            <center>
                                <button type="button" class="btn btn-danger" ng-click="resetLEDs()">Reset LEDs</button>
                                <p></p>
                                <p class="well well-sm alert-success" ng-show="resetConfig">LEDs have been reset to defaults.</p>
                            </center>
                        </div>
                    </div>
                </div>
            </div>

            <div ng-show="device == 'tetra'">
                <div class="row">
                    <div class="col-md-4" ng-controller="TetraYellow">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Yellow</h3>
                            </div>
                            <div class="panel-body">
                                <p class="well well-sm alert-success" ng-show="savedConfig">LED Configuration Updated</p>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="enabled" ng-checked="enabled"> Enabled
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">Trigger</div>
                                        <select class="form-control" ng-model="trigger" ng-disabled="!enabled">
                                            <option value="netdev">Netdev</option>
                                            <option value="timer">Timer</option>
                                            <option value="none">None</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group" ng-show="trigger == 'netdev'">
                                    <div class="input-group">
                                        <div class="input-group-addon">Mode</div>
                                        <select class="form-control" ng-model="mode">
                                            <option value="link tx rx">TX & RX</option>
                                            <option value="link tx">TX</option>
                                            <option value="link rx">RX</option>
                                        </select>
                                    </div>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Interface</span>
                                            <input type="text" class="form-control" placeholder="{{interface}}" ng-model="interface">
                                        </div>
                                    </p>
                                </div>

                                <div class="form-group" ng-show="trigger == 'timer'">
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">On (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOn}}" ng-model="delayOn">
                                        </div>
                                    </p>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Off (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOff}}" ng-model="delayOff">
                                        </div>
                                    </p>
                                </div>
                                <button type="button" class="btn btn-primary" ng-click="setTetraYellow()">Save</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4" ng-controller="TetraBlue">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Blue</h3>
                            </div>
                            <div class="panel-body">
                                <p class="well well-sm alert-success" ng-show="savedConfig">LED Configuration Updated</p>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="enabled" ng-checked="enabled"> Enabled
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">Trigger</div>
                                        <select class="form-control" ng-model="trigger" ng-disabled="!enabled">
                                            <option value="netdev">Netdev</option>
                                            <option value="timer">Timer</option>
                                            <option value="none">None</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group" ng-show="trigger == 'netdev'">
                                    <div class="input-group">
                                        <div class="input-group-addon">Mode</div>
                                        <select class="form-control" ng-model="mode">
                                            <option value="link tx rx">TX & RX</option>
                                            <option value="link tx">TX</option>
                                            <option value="link rx">RX</option>
                                        </select>
                                    </div>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Interface</span>
                                            <input type="text" class="form-control" placeholder="{{interface}}" ng-model="interface">
                                        </div>
                                    </p>
                                </div>

                                <div class="form-group" ng-show="trigger == 'timer'">
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">On (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOn}}" ng-model="delayOn">
                                        </div>
                                    </p>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Off (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOff}}" ng-model="delayOff">
                                        </div>
                                    </p>
                                </div>
                                <button type="button" class="btn btn-primary" ng-click="setTetraBlue()">Save</button>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-4" ng-controller="TetraRed">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Red</h3>
                            </div>
                            <div class="panel-body">
                                <p class="well well-sm alert-success" ng-show="savedConfig">LED Configuration Updated</p>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="enabled" ng-checked="enabled"> Enabled
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">Trigger</div>
                                        <select class="form-control" ng-model="trigger" ng-disabled="!enabled">
                                            <option value="netdev">Netdev</option>
                                            <option value="timer">Timer</option>
                                            <option value="none">None</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group" ng-show="trigger == 'netdev'">
                                    <div class="input-group">
                                        <div class="input-group-addon">Mode</div>
                                        <select class="form-control" ng-model="mode">
                                            <option value="link tx rx">TX & RX</option>
                                            <option value="link tx">TX</option>
                                            <option value="link rx">RX</option>
                                        </select>
                                    </div>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Interface</span>
                                            <input type="text" class="form-control" placeholder="{{interface}}" ng-model="interface">
                                        </div>
                                    </p>
                                </div>

                                <div class="form-group" ng-show="trigger == 'timer'">
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">On (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOn}}" ng-model="delayOn">
                                        </div>
                                    </p>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Off (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOff}}" ng-model="delayOff">
                                        </div>
                                    </p>
                                </div>
                                <button type="button" class="btn btn-primary" ng-click="setTetraRed()">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div ng-show="device == 'nano'">
                <div class="row">
                    <div class="col-md-3">
                    </div>
                    <div class="col-md-6" ng-controller="NanoBlue">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Blue</h3>
                            </div>
                            <div class="panel-body">
                                <p class="well well-sm alert-success" ng-show="savedConfig">LED Configuration Updated</p>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" ng-model="enabled" ng-checked="enabled"> Enabled
                                    </label>
                                </div>

                                <div class="form-group">
                                    <div class="input-group">
                                        <div class="input-group-addon">Trigger</div>
                                        <select class="form-control" ng-model="trigger" ng-disabled="!enabled">
                                            <option value="netdev">Netdev</option>
                                            <option value="timer">Timer</option>
                                            <option value="none">None</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group" ng-show="trigger == 'netdev'">
                                    <div class="input-group">
                                        <div class="input-group-addon">Mode</div>
                                        <select class="form-control" ng-model="mode">
                                            <option value="link tx rx">TX & RX</option>
                                            <option value="link tx">TX</option>
                                            <option value="link rx">RX</option>
                                        </select>
                                    </div>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Interface</span>
                                            <input type="text" class="form-control" placeholder="{{interface}}" ng-model="interface">
                                        </div>
                                    </p>
                                </div>

                                <div class="form-group" ng-show="trigger == 'timer'">
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">On (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOn}}" ng-model="delayOn">
                                        </div>
                                    </p>
                                    <p>
                                        <div class="input-group">
                                            <span class="input-group-addon">Off (ms)</span>
                                            <input type="text" class="form-control" placeholder="{{delayOff}}" ng-model="delayOff">
                                        </div>
                                    </p>
                                </div>
                                <button type="button" class="btn btn-primary" ng-click="setNanoBlue()">Save</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                    </div>
                </div>
            </div>
        </div>
